<template>
	<div class="login_div" :login_data="loginRes">
		<div class="header_div">
			<p class="btn_back" @click="btn_back">返回</p>
			{{loginTypeName}}
			<p class="btn_head_register" @click="btn_head_register">注册</p>
		</div>
		<div v-if="loginType == 1">
			<div class="input_div">
				<p class="input_p">
					<span>账号</span>
					<input type="text" name="" placeholder="请输入手机号或者邮箱">
				</p>
				<p class="input_p">
					<span>密码</span>
					<input type="password" name="" placeholder="请输入密码">
				</p>
			</div>
			<p class="btn_forget" @click="btn_forget">忘记密码？</p>
			<p class="btn_login" @click="btn_login">确定</p>
			<p class="dongtai_login" @click="dongtai_login">动态登录</p>
			<p class="or_p">or</p>
			<div class="login_bind">
				<p style="width: 1.3333rem; height: 1.3333rem; display: inline-block; margin: 0 0.5333rem;"><img src="../../assets/img/login_wx.png" alt="" style="width: 100%; height:100%; "></p>
				<p style="width: 1.3333rem; height: 1.3333rem; display: inline-block; margin: 0 0.5333rem;"><img src="../../assets/img/login_wb.png" alt="" style="width: 100%; height:100%; "></p>
				<p style="width: 1.3333rem; height: 1.3333rem; display: inline-block; margin: 0 0.5333rem;"><img src="../../assets/img/login_qq.png" alt="" style="width: 100%; height:100%; "></p>
			</div>
		</div>
		<div  v-if="loginType == 2">
			<div class="input_div">
				<p class="input_p">
					<span>账号</span>
					<input type="text" name="" v-model="user_phone" placeholder="请输入手机号">
				</p>
				<p class="input_p">
					<span>验证码</span>
					<input type="password" name="" v-model="user_code" placeholder="请输入验证码">
					<input type="button" class="btn_getCode" value="获取验证码" @click="btn_getCode" name="">
				</p>
			</div>
			<p class="btn_login" @click="btn_login">确定</p>
			<p class="dongtai_login" @click="mima_login">密码登录</p>
		</div>
		<alert-com :alertMsg="alertWord" v-show="alertWord != ''"></alert-com>
	</div>
</template>
<script>
	import alert from '../public/alert.vue'
	export default{
		data(){
			return {
				alertWord: '',
				loginType:'1', // 密码登录：1； 动态登录：2.
				loginTypeName:'密码登录',
				user_phone:'',
				user_code:'',
			}
		},
		components:{
			"alert-com": alert,
		},
		created:function(){
			//this.loginType = 1;
			// var _loginInfo = {};
			// if(JSON.stringify(localMethod.prototype.getObject("_login"))){
			// 	_loginInfo = localMethod.prototype.getSessionObj("_login");
			// }else{
			// 	_loginInfo = localMethod.prototype.getObject("_login");
			// }
			// if(_loginInfo == '{}'){
			// 	console.log('gologin')
			// }else{
			// 	console.log('has login')
			// }
		},
		computed:{
			loginRes(){
				var _res = this.$store.state.login.loginRes;
				if(_res.success == undefined){
					return false;
				}else{
					if(_res.success == true){
						localMethod.prototype.setObject('_login',_res)
						this.$router.push({ path: '/mine' })
					}else{
						this.alertWord = 'Failed';
						var self=this;  
    					setTimeout(function(){
     						self.alertWord = '';
     					},3000);
					}
				}
				return this.$store.state.login.loginRes;
			}
		},
		methods:{
			//注册
			btn_head_register:function(){
				this.$router.push({ path: '/register' })
			},
			btn_back:function(){
				this.$router.push({ path: '/mine' })
			},
			btn_login:function(){
				var loginInfo = {};
				if(this.user_phone  != '' &&  loginInfo._ucode != ''){
					loginInfo._uphone = this.user_phone;
					loginInfo._ucode = this.user_code;
					this.$store.state.login.formState = loginInfo;
					this.$store.dispatch('get_login');
				}else{
					console.log('empty')
				}
			},
			btn_forget:function(){
				console.log('btn_forget')
			},
			dongtai_login:function(){
				this.loginType = 2;
				this.loginTypeName = "动态登录";
			},
			mima_login:function(){
				this.loginType = 1;
				this.loginTypeName = "密码登录";
			},
			btn_getCode:function(){
				var codeInfo = {};
				if(this.user_phone  != '' ){
					codeInfo._uphone = this.user_phone;
					this.$store.state.login.codeData = codeInfo;
					this.$store.dispatch('get_code');
				}else{
					console.log('empty')
				}
			}
		}
	}
</script>
<style rel="stylesheet" scoped>
	.login_div{

	}
	
	
	
	.or_p{
		font-size: 0.32rem;
		margin-top: 1.3333rem;
		color: #A9A9A9;
		margin-bottom: 0.8rem;
		text-align: center;
	}
	.btn_forget{
		text-align: right;
		padding: 0 0.4rem;
		font-size: 0.32rem;
		margin-top: 0.1333rem;
		color: #A9A9A9;
	}
	.login_bind{
		text-align: center;
	}
	.btn_getCode{
		position: absolute;
	    right: 0.4rem;
	    width: 100px;
	    text-indent: 0;
	}
	.input_p{
		padding: 0;
	}
	.input_p input[type=text], .input_p input[type=password]{
		text-indent: 90px;
	}
	
</style>
